<template>
	<view class="">
		<view class="">
			<view class="list-cell b-b" v-for="(item, index) in dataList" :key="index" @click="chooseEvent(item, 0)">
				<u-image width="60rpx" height="60rpx" :src="item.icon"></u-image>
				<text class="anchor-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 车系列表 -->
		<u-popup v-model="showRight" mode="right">
			<view class="list-cell b-b" style="color: #FFFFFF;background: #2B85E4;text-align: center;">{{ current.name }}</view>
			<scroll-view :scroll-top="50" scroll-y="true" :style="{ height: winHeight + 'px' }">
				<view class="">
					<view class="list-cell b-b" v-for="(item, index) in vehicle" :key="index" @click="chooseEvent(item, 1)">
						<text class="anchor-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 选择车型 -->
		<u-popup v-model="showRightPicker" mode="right">
			<view class="list-cell b-b" style="color: #FFFFFF;background: #2B85E4;text-align: center;">{{ current.name1 }}</view>
			<scroll-view :scroll-top="50" scroll-y="true" :style="{ height: winHeight + 'px' }">
				<view class="">
					<view class="list-cell b-b" v-for="(item, index) in vehicleChild" :key="index" @click="chooseEvent(item, 2)">
						<text class="anchor-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: {
				icon: '',
				name: '',
				name1: '',
				name2: ''
			},
			dataList: [],
			vehicle: [],
			vehicleChild: [],
			showRight: false,
			showRightPicker: false,
			winHeight: uni.getSystemInfoSync().windowHeight -50
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		chooseEvent(item, type) {
			if (type == 0) {
				this.current.name = item.name;
				this.current.icon = item.icon;
				this.getBardById(item.id);
			} else if (type == 1) {
				this.current.name1 = item.name;
				this.getBardBySendId(item.id);
			} else {
				this.current.name2 = item.name;
				this.$util.prePage().setCartItem(this.current);
				this.back();
			}
		},
		async loadData() {
			const res = await this.$request('user/brand-first', {}, { showLoading: true });
			if (res.result == 0) {
				this.dataList = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getBardById(id) {
			const res = await this.$request('user/brand-second', { id }, { showLoading: true });
			if (res.result == 0) {
				this.vehicle = res.data;
				this.showRight = true;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getBardBySendId(id) {
			const res = await this.$request('user/brand-third', { id }, { showLoading: true });
			if (res.result == 0) {
				this.vehicleChild = res.data;
				this.showRightPicker = true;
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: $u-content-color;
	font-size: 14px;
	line-height: 30px;
	background-color: #fff;
}

.anchor-text {
	margin-left: 20rpx;
}
.vehicle-list-item-title {
	min-width: 300rpx;
	padding: 24upx 30upx;
	line-height: 1.5;
	background-color: #f7f7f7;
	font-size: 32upx;
}

.vehicle-list-item-contect {
	font-size: 32upx;
	padding: 24upx 30upx;
	width: 100%;
	box-sizing: border-box;
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-data: center;
	border-bottom: 1rpx solid #eee;
}
</style>
